<template>
  <a-modal
    title="調整押金"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    :footer="[]"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item v-show="false"><a-input v-decorator="['id']" /></a-form-item>
        <a-form-item
          label="調整前"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          {{ deposit }}
        </a-form-item>
        <a-form-item
          label="押金調整"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-radio-group
            :default-value="1"
            @change="handleFormLayoutChange"
            v-decorator="['yjStyle']">
            <a-radio-button :value="1">
              涨
            </a-radio-button>
            <a-radio-button :value="2">
              降
            </a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="調整值"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input-number
            style="width:100%"
            :precision="2"
            :min="0"
            :max="99999999"
            :step="10"
            @change="amountChange"
            v-decorator="['amount', { initialValue: 0, rules: [{required: true, message: '請輸入金额'}]}]"/>
        </a-form-item>
        <a-form-item
          label="調整爲"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input-number
            style="width:100%"
            :precision="2"
            :min="0"
            :max="99999999"
            :step="10"
            v-decorator="['depositValue', { initialValue: 0 }]"
            :disabled="true"
            />
        </a-form-item>
      </a-form>
      <a-row class="but">
        <a-button  type="primary" @click="handleSubmit">確定</a-button>
      </a-row>
      <a-divider />
    </a-spin>
    <bill-plan-select ref="billPlanSelect" @ok="handleSelectBillOk" />
  </a-modal>
</template>

<script>
  import moment from 'moment'
  import { houseLeasedetail, addAdjustdeposit } from '@/api/modular/main/houselease/houseLeaseManage'
  export default {
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        visible: false,
        confirmLoading: false,
        memberLoading: false,
        form: this.$form.createForm(this),
        leaseId: 0,
        deposit: 0.00,
        depositValue: 0.00,
        amount: 0.00,
        yjStyle: 1
      }
    },
    methods: {
      moment,
      // 初始化方法
      edit (record) {
        this.visible = true
        this.leaseId = record
        this.getLeaseDetail(record)
        setTimeout(() => {
          this.form.setFieldsValue(
            {
              id: record
            }
          )
        }, 100)
      },
      getLeaseDetail(id) {
        houseLeasedetail({ id: id }).then((res) => {
          if (res.code === 200) {
            this.deposit = res.data.deposit
            this.depositValue = res.data.deposit
          } else {
          }
        })
      },
      handleFormLayoutChange(e) {
        this.yjStyle = e.target.value
      },
      amountChange(value) {
        this.amount = value
        if (this.yjStyle === 1) {
         this.depositValue = this.deposit + this.amount
          this.form.setFieldsValue(
            {
              depositValue: this.deposit + this.amount
            }
          )
        } else {
          this.form.setFieldsValue(
            {
              depositValue: this.deposit - this.amount
            }
          )
         this.depositValue = this.deposit - this.amount
        }
      },
      handleSelectBillOk(item) {
        this.$nextTick(() => {
          this.form.setFieldsValue({
            qsNum: item.qsNum,
            name: item.name,
            rentStartDate: item.rentStartDate,
            rentEndDate: item.rentEndDate
          })
        })
      },
      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            for (const key in values) {
              if (typeof (values[key]) === 'object') {
                values[key] = JSON.stringify(values[key])
              }
            }
            if (values.amount <= 0) {
              this.$message.error('調整值金額需大於0')
              this.confirmLoading = false
              return false
            }
            if (values.depositValue < 0) {
              this.$message.error('調整後的金額不能小於0')
              this.confirmLoading = false
              return false
            }
            values.amount = this.amount
            values.deposit = this.depositValue
            values.leaseId = this.leaseId
            values.yjStyle = this.yjStyle
            addAdjustdeposit(values).then((res) => {
              if (res.code === 200) {
                this.$message.success('添加成功！')
                this.confirmLoading = false
                this.$emit('ok', values)
                this.handleCancel()
              } else {
                this.$message.error(res.msg)//  + res.message
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
        this.endOpen = false
        this.amount = 0.00
        this.yjStyle = 1
      }
    }
  }
</script>

<style scoped>
  .title-it{
    background-color: aquamarine;
    padding: 10px 0px;
  }
  .mocheck{
    background-color: rgba(58, 136, 180, 0.822);
    color: aliceblue;
  }
  .but{
    text-align: center;
  }
</style>
